<template>
  <el-dialog
    :title="!dataForm.id ? '新增' : '修改'"
    :close-on-click-modal="false"
    :visible.sync="visible"
  >
    <el-form
      :model="dataForm"
      :rules="dataRule"
      ref="dataForm"
      @keyup.enter.native="dataFormSubmit()"
      label-width="120px"
      v-loading="loading"
    >
      <el-form-item label="每日开始时间" prop="startTime">
        <template>
          <el-time-select
            placeholder="起始时间"
            v-model="dataForm.startTime"
            :picker-options="{
              start: '00:00',
              step: '00:30',
              end: '23:00'
            }">
          </el-time-select>
        </template>
      </el-form-item>
      <el-form-item label="每日结束时间" prop="endTime">
        <template>
          <el-time-select
            placeholder="结束时间"
            v-model="dataForm.endTime"
            :picker-options="{
              start: '00:00',
              step: '00:30',
              end: '23:00',
              minTime: dataForm.startTime
            }">
          </el-time-select>
        </template>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { info, add, update } from '@/api/coupon/seckill-session-time'
export default {
  data() {
    const validateTime = (rule, value, callback) => {
      if (value.length < 2) {
        callback(new Error('请选择日期'))
      } else {
        callback()
      }
    }
    return {
      visible: false,
      loading: false,
      dataForm: {
        id: 0,
        name: "",
        startTime: null,
        endTime: null,
      },
      dataRule: {
        startTime: [
          { required: true, message: "每日开始时间不能为空", trigger: "blur" }
        ],
        endTime: [
          { required: true, message: "每日结束时间不能为空", trigger: "blur" }
        ]
      }
    };
  },
  methods: {
    init(id) {
      this.dataForm.id = id || 0;
      this.visible = true;
      this.$nextTick(() => {
        this.$refs["dataForm"].resetFields();
        if (this.dataForm.id) {
          this.loading = true
          info(this.dataForm.id)
          .then(({ data }) => {
            const st = new Date(data.startTime)
            const et = new Date(data.endTime)
            this.dataForm.startTime = st.getHours() + ":" + (st.getMinutes() < 10 ? st.getMinutes() + "0" : st.getMinutes())
            this.dataForm.endTime = et.getHours() + ":" + (et.getMinutes() < 10 ? et.getMinutes() + "0" : et.getMinutes())
            this.loading = false
          });
        }
      });
    },
    // 表单提交
    dataFormSubmit() {
      this.$refs["dataForm"].validate(valid => {
        if (valid) {
          const st = this.dataForm.startTime.split(":")
          const sd = new Date();
          sd.setHours(st[0])
          sd.setMinutes(st[1])
          console.log(sd.getSeconds())
          sd.setSeconds(0,0)

          const et = this.dataForm.endTime.split(":")
          const ed = new Date();
          ed.setHours(et[0])
          ed.setMinutes(et[1])
          console.log(ed.getSeconds())
          ed.setSeconds(0,0)

          const query = {
            id: this.dataForm.id || undefined,
            startTime: sd,
            endTime: ed
          }
          if(!this.dataForm.id) {
            add(query)
            .then(() => {
                this.$message({
                  message: "操作成功",
                  type: "success"
                });
                this.visible = false;
                this.$emit("refreshDataList");
              });
          } else {
            update(query)
              .then(() => {
                this.$message({
                  message: "操作成功",
                  type: "success"
                });
                this.visible = false;
                this.$emit("refreshDataList");
              });
          }
        }
      });
    }
  }
};
</script>
